<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="styles.css"/>
		<script type='text/javascript' src='jquery-min.js'></script>
		<script type='text/javascript' src='funct.js'></script>
		<script type="text/javascript">
			var coord = {X:300, Y:150, scaleX:30, scaleY:30};
			var f = {str:"", prefix:{}, prefixLen:0};
			
			$(document).ready(function(){
				var canvas = document.getElementById('myCanvas');
				drawCoordinator(coord, canvas);
				
				$("#btnCalc").click(function(){
					var from = Number(document.getElementById("txtFrom").value);
					var to = Number(document.getElementById("txtTo").value);
					var oldF = document.getElementById("hFormula").value;
					var currentF = document.getElementById("txtFormula").value;
					var oldPrefix = document.getElementById("hPrefix").value;
					var scX = document.getElementById("txtScaleX").value;
					var scY = document.getElementById("txtScaleY").value;
					var step = 0.02;
					
					currentF = currentF.replace(/ /g,"");
					
					coord.scaleX = scX;
					coord.scaleY = scY;
					
					if(currentF == oldF && oldPrefix.length>0){
						var context = canvas.getContext('2d');
						context.clearRect(0, 0, canvas.width, canvas.height);
						drawCoordinator(coord, canvas);
						draw_f(coord, f, canvas, from, to, step);
						return;
					}
					
					$.ajax({
						url:"backend/nmath.php",
						cache:false,
						type:"POST",
						data:{txtFormula:currentF, txtVariables:'x'},
						success:function(responseText){
							var s = responseText.substring(0, 4);
							if(s == "error"){
								return;
							}
							document.getElementById("hFormula").value = currentF;
							document.getElementById("hPrefix").value = responseText;
							f.prefix = new Array();
							f.prefixLen = 0;
							f.str = currentF;
							var context = canvas.getContext('2d');
							context.clearRect(0, 0, canvas.width, canvas.height);
							drawCoordinator(coord, canvas);
							init_function(f, responseText);
							draw_f(coord, f, canvas, from, to, step);
						}
					});
					
				});
				
				$("#txtFormula").bind("enterKey", function(e){
					var from = Number(document.getElementById("txtFrom").value);
					var to = Number(document.getElementById("txtTo").value);
					var oldF = document.getElementById("hFormula").value;
					var currentF = document.getElementById("txtFormula").value;
					var oldPrefix = document.getElementById("hPrefix").value;
					
					var scX = document.getElementById("txtScaleX").value;
					var scY = document.getElementById("txtScaleY").value;
					
					var step = 0.02;
					
					currentF = currentF.replace(/ /g,"");
					
					coord.scaleX = scX;
					coord.scaleY = scY;
					
					if(currentF == oldF && oldPrefix.length>0){
						var context = canvas.getContext('2d');
						context.clearRect(0, 0, canvas.width, canvas.height);
						drawCoordinator(coord, canvas);
						draw_f(coord, f, canvas, from, to, step);
						return;
					}
					
					$.ajax({
						url:"backend/nmath.php",
						cache:false,
						type:"POST",
						data:{txtFormula:currentF, txtVariables:'x'},
						success:function(responseText){
							var s = responseText.substring(0, 4);
							if(s == "error"){
								return;
							}
							document.getElementById("hFormula").value = currentF;
							document.getElementById("hPrefix").value = responseText;
							f.prefix = new Array();
							f.prefixLen = 0;
							f.str = currentF;
							var context = canvas.getContext('2d');
							context.clearRect(0, 0, canvas.width, canvas.height);
							drawCoordinator(coord, canvas);
							init_function(f, responseText);
							draw_f(coord, f, canvas, from, to, step);
						}
					});
				});
				
				$("#txtFormula").keyup(function(e){
					if(e.keyCode==13){
						$(this).trigger("enterKey");
					}
				});
			});
			
		</script>
		<title>VTech blog - A technical blog</title>
	</head>
	<body>
		<div id="container">
			<div id="div_header"></div>
			<div id="div_nav" class="menu">
				<ul>
					<li><a href="index.php">Home</a></li>
					<li><a href="funct.php">NMath</a></li>
					<li><a href="about.php">About me</a></li>
				</ul>
			</div>
			<div id="right_navigate">
				C/C++
				Java
				Assembly
				Unix
				Linux
				Windows
				PHP
				C#
				VBA
				<code class="keyword">if</code>
				<code>(you are here) you are good!</code>
			</div>
			<div id="div_main">
				<form id="fFrm" method="POST">
					<table>
						<tr>
							<td>formula: &nbsp;
								<input type="hidden" id="hPrefix" name="hPrefix" value="" />
								<input type="hidden" id="hFormula" name="hFormula" value="" />								<input type="text" id="txtFormula" name="txtFormula" value="" />
								&nbsp;
								<input type="button" id="btnCalc" name="btnCalc" value="Calc" />
							<td>
						</tr>
						<tr>
							<td>Coordinator setting: &nbsp;</td>
						</tr>
						<tr>
							<td>scale: &nbsp;								<input type="text" id="txtScaleX" name="txtScaleX" value="30">
								<input type="text" id="txtScaleY" name="txtScaleY" value="30">
							<td>
						</tr>
						<tr>
							<td>Xo: &nbsp;								<input type="text" name="txtX0" value="">
								&nbsp;
								Yo:
								<input type="text" name="txtY0" value="">
							<td>
						</tr>
						<tr>
							<td>From: &nbsp;								<input type="text" id="txtFrom" name="txtFrom" value="-1.5">
								&nbsp;
								To:
								<input type="text" id="txtTo" name="txtTo" value="1.5">
							<td>
						</tr>

					</table>
				</form>
				<canvas id="myCanvas" width="600" height="300" style="border:1px solid #0f00ff">
					Your browser doesn't support HTM5 canvas</canvas>
			</div>
			<div id="div_footer" >Copyright @Dao Anh Vu</div>
		</div>
	</body>
</html>
